<template>
  <div class="message-box">
    <img :src="message.image" alt="profile image" />
    <div class="message-content">
      <div class="message-header">
        <div class="name">{{ message.name }}</div>
        <div class="star-checkbox">
          <input type="checkbox" :id="`star-${message.id}`" />
          <label :for="`star-${message.id}`">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star">
              <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" /></svg>
          </label>
        </div>
      </div>
      <p class="message-line">{{ message.content }}</p>
      <p class="message-line time">{{ message.time }}</p>
    </div>
  </div>
</template>

<script setup>
defineProps({
  message: {
    type: Object,
    required: true
  }
});
</script>

<style scoped>
.message-box {
  display: flex;
  align-items: flex-start;
  margin-bottom: 16px;
}

.message-box img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 16px;
}

.message-content {
  display: flex;
  flex-direction: column;
}

.message-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.name {
  font-weight: bold;
}

.star-checkbox input {
  display: none;
}

.star-checkbox label {
  cursor: pointer;
}

.star-checkbox svg {
  fill: none;
  stroke: #888;
}

.star-checkbox input:checked + label svg {
  stroke: #FFD700;
  fill: #FFD700;
}

.message-line {
  margin: 4px 0;
}

.message-line.time {
  font-size: 12px;
  color: #888;
}
</style>
